<template>
    <view class="bg-white pl-[20rpx] pr-[20rpx] pb-[20rpx]">
        <u-form
            labelPosition="left"
            :model="formData"
            :rules="formRules"
            ref="formRef"
        >
            <u-form-item
                label="手机号"
                prop="mobile"
                borderBottom
                labelWidth="60"
            >
                <u-input
                    type="number"
                    name="mobile"
                    border="bottom"
                    maxlength="11"
                    placeholder="请输入手机号"
                    v-model="formData.mobile"
                ></u-input>
            </u-form-item>
            <u-form-item
                label="验证码"
                prop="code"
                borderBottom
                labelWidth="60"
            >
                <u-input
                    type="number"
                    name="code"
                    border="bottom"
                    maxlength="6"
                    placeholder="请输入验证码"
                    v-model="formData.code"
                >
                    <template #suffix>
                        <u-code
                            ref="codeRef"
                            @change="codeChange"
                            seconds="60"
                            changeText="X秒重新获取"
                        ></u-code>
                        <text
                            @tap="getSmsCode"
                            :text="codeTips"
                            class="code-txt"
                            >{{ codeTips }}</text
                        >
                    </template>
                </u-input>
            </u-form-item>
        </u-form>
        <view class="submit-btn">
            <u-button type="primary" text="确定" @click="submit"></u-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { test } from "@/uni_modules/uview-plus";
import useUserStore from "@/stores/user";
import { storeToRefs } from "pinia";
import { messageSuccess, messageError } from "@/utils/message";
import { useRoute } from "@/hooks/useRoute";
import { sendSmsCode } from "@/api/login";
import { getUserInfo, updateMobile } from "@/api/user";

const formRef = ref(null);
const codeRef = ref(null);
const codeTips = ref("");

const userStore = useUserStore();
const { isLogin } = storeToRefs(userStore);

const formData = reactive({
    mobile: "",
    code: "",
});

const formRules = reactive({
    mobile: [
        {
            required: true,
            message: "请输入手机号",
            trigger: ["change", "blur"],
        },
        {
            validator: (rule, value, callback) => {
                return test.mobile(value);
            },
            message: "手机号不符合要求",
            trigger: ["change", "blur"],
        },
    ],
    code: [
        {
            type: "string",
            required: true,
            message: "请填写验证码",
            trigger: ["blur", "change"],
        },
        {
            min: 6,
            message: "验证码不符合要求",
        },
    ],
});

const getUserData = async () => {
    if (isLogin.value) {
        const res = await getUserInfo();
        formData.mobile = res.mobile;
    }
};

const codeChange = (text) => {
    codeTips.value = text;
};

const getSmsCode = async () => {
    if (codeRef.value?.canGetCode) {
        if (!test.mobile(formData.mobile)) {
            messageError("手机号不符合要求");
            return "";
        }
        await sendSmsCode({
            scene: "change_mobile",
            mobile: formData.mobile,
        });
        messageSuccess("验证码已发送");
        codeRef.value?.start();
    }
};

const jumpClick = (url) => {
    useRoute().jumpTo({ url: url });
};

const submit = () => {
    formRef.value.validate().then(async (valid) => {
        if (valid) {
            await updateMobile({
                mobile: formData.mobile,
                code: formData.code,
            });
            messageSuccess("修改成功");
        }
    });
};

getUserData();
</script>

<style lang="scss" scoped>
.submit-btn {
    margin-top: 50rpx;
    padding: 0 20rpx;
}
</style>
